<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html>
<head>
    <title>智慧验车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="<%=request.getContextPath()%>/bootstrap/css/bootstrap.css" rel='stylesheet' type='text/css' />
    <link href="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-table/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
    
	<script src="<%=request.getContextPath()%>/jquery/jquery-1.10.2.min.js"></script>
	<script	src="<%=request.getContextPath()%>/bootstrap/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script src="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-table/js/bootstrap-table.js"></script>
	<script src="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
	
    <style type="text/css">
    
    	body { padding-top: 70px;
    	 padding-bottom: 70px;
    	 min-height:400px;
    	 }
    	
        .logo{
			background: url("<%=request.getContextPath()%>/images/eee.png") no-repeat center;
			background-size:contain;
		}
		
		
		.datetimepicker{
			top:45px!important;
		}
		.form-group{
			margin-right:20px;
		}
    </style>
    <script type="text/javascript">
    	$(function(){
    		var list = '${myCheckCar.list}';
    	})
    </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <span class="navbar-brand logo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>

    <div class="collapse navbar-collapse">
      
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> ${username} <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">修改密码</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">退出</a></li>
          </ul>
        </li>
      </ul>
      
      <form class="navbar-form navbar-right">
      
        <div class="form-group">
        	 
        </div>
        
      	<div id="datetimepicker" class="form-group input-append date form_datetime">
		    <input size="16" type="text" id="orderDate" class="form-control" readonly>
		    <span class="add-on"><i class="icon-th"></i></span>
		</div>
		   <!--  <div id="datetimepicker"  class="input-append date form_datetime">
			    <input size="16" type="text" value="" readonly>
			    <span class="add-on"><i class="icon-th"></i></span>
			</div> -->
		
        <div class="form-group">
          <input type="text" class="form-control" placeholder="车牌号">
        </div>
        <button id="btn-Search" class="btn btn-default">查询</button>
      </form>
      
    </div>
  </div>
</nav>


<div class="container">
	<ul class="nav nav-pills nav-stacked pull-left col-xs-2">
	  <li role="presentation" class="active"><a href="#">全部</a></li>
	  <li role="presentation"><a href="#">排队中</a></li>
	  <li role="presentation"><a href="#">已完成</a></li>
	</ul>
	
	
	
	<div class="pull-right col-xs-10">
		<table id="tablelist">
		    <thead>
			    <tr>
			        
			    </tr>
		    </thead>
		</table>
	</div>
</div>













	<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" 
							aria-hidden="true">×
					</button>
					<h4 class="modal-title" id="myModalLabel">
					</h4>
				</div>
				<div class="modal-body">
				
					<div class="input-group col-xs-9">
					  <span class="input-group-addon" id="basic-addon1">订单状态</span>
					  <select id="orderSuccessSelect" class="form-control" aria-describedby="basic-addon1">
					  </select>
					</div>
				
				</div>
				<div class="modal-footer">
					 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            		<button type="button" class="btn btn-primary save-btn">标记</button>
				</div>
			</div>
		</div>
	</div>
	
    <!--footer section start-->
   <nav class="navbar navbar-default navbar-fixed-bottom text-center">
	   	<p></p>
	   	<p>Copyright &copy; 2017 Company name All rights reserved.</p>
	</nav>


<script>
	Date.prototype.Format = function(fmt)   
	{ //author: meizz   
		var o = {   
		 "M+" : this.getMonth()+1,                 //月份   
		 "d+" : this.getDate(),                    //日   
		 "h+" : this.getHours(),                   //小时   
		 "m+" : this.getMinutes(),                 //分   
		 "s+" : this.getSeconds(),                 //秒   
		 "q+" : Math.floor((this.getMonth()+3)/3), //季度   
		 "S"  : this.getMilliseconds()             //毫秒   
		};   
		if(/(y+)/.test(fmt))   
		 fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
		for(var k in o)   
		 if(new RegExp("("+ k +")").test(fmt))   
		fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
		return fmt;   
	}  
	
	
	var vehicleTypeArray = {
			1 : {text : '大型货车', cls : 'danger'},
			2 : {text : '小型货车', cls : 'warning'},
			3 : {text : '小型轿车', cls : 'primary'}
	};
	
	var isSuccessArray = {
			1 : {text : '已完成', cls : 'success'},
			0 : {text : '排队中', cls : 'danger'}
	};
	
	var failReasonArray = {
			0 : {text : '订单成功完成', success : 1},
			1 : {text : '', success : 0},
			2 : {text : '车身检验不合格', success : 0},
			3 : {text : '车辆存在违章未处理', success : 0},
			5 : {text : '其他', success : 0}
	};
	
	
	var targetId = null;
	var targetIndex = null;
	
	
	$(function(){
		
		var col = [
		 	      	{
		 	        	 field:"description",
		 	        	 title:"",
		 	        	 formatter:function(value,row,index){
		 	        		
		 	        		var html = "<div class='col-xs-3 text-" + vehicleTypeArray[row.vehicleType].cls + "'><h3>" + row.plateNo + "</h3><h5>" + row.vin + "</h5><span class='label label-" + vehicleTypeArray[row.vehicleType].cls + "'>" + vehicleTypeArray[row.vehicleType].text + "</span></div>"
		 	        					+ "<div class='col-xs-3 text-info text-center'><h5>" + row.name + "</h5><h4>" + row.mobile + "</h4><h5>" + row.orderDate + "</h5></div>"
		 	        					+ "<div class='col-xs-4 text-" + isSuccessArray[row.isSuccess].cls + " text-center'><h4><span class='label label-" + isSuccessArray[row.isSuccess].cls + "'>" + isSuccessArray[row.isSuccess].text + "</span></h4><div>" + failReasonArray[row.failReason].text + "</div></div>"
		 	        					+ "<div class='col-xs-2 text-center'><button class='btn btn-" + (row.isSuccess ? "default" : vehicleTypeArray[row.vehicleType].cls) + " btn-lg opration' targetId='" + row.id + "' targetPlateNo='" + row.plateNo + "' targetIndex='" + index + "'>标记</button>" + "</div>";
		 	        		return html;
		 	        	 }
		 	    	}  
			 	];
		
	 	$('#tablelist').bootstrapTable({
			toggle:"table",
	    	cardView:"true",
	    	columns:col,
	    	pagination : true,
	    	sidePagination : "client",
	    	pageSize : 5
	    });
	 	
	 	$("#orderDate").val(new Date().Format("yyyy-MM-dd"));
	 	
	 	$('#datetimepicker').datetimepicker({
	        format: 'yyyy-mm-dd',
	        language:'zh-CN',
			autoclose: true,
	        minView:'month',
	        todayHighlight : true
	    });  
	  /*   $("#datetimepicker input").click(function(){
	    	$(this).closest("#datetimepicker").find(".datetimepicker-inline").toggle();
	    }); */
	    

	    $("#btn-Search").click(function () {
	    	var orderDate = $('#orderDate').val();
	    	$("#tablelist").bootstrapTable('refresh', {
	            url: "getOrdersByCondition", //重设数据来源
	            query: {orderDate: orderDate}//传到后台的参数
	    	});
	    });
	    
	    
	    $("#orderSuccessSelect").append(function(){
	    	
	    	var options = "";
	    	
	    	for(var j in isSuccessArray)
	    	{
	    		options += "<optgroup label='" + isSuccessArray[j].text + "'>";
	    		
	    		for(var i in failReasonArray)
		    	{
	    			if(failReasonArray[i].success == j)
	    			{
			    		options += "<option value='" + i + "'>" + (failReasonArray[i].text||"无") + "</option>";
	    			}
		    	}
	    		options += "</optgroup>";
	    	}
	    	
	    	return options;
	    });
	    
	    
	    $(document).on("click", ".opration", function(){
	        
	        targetId = $(this).attr("targetId");
	        targetIndex = $(this).attr("targetIndex");
	        $("#myModalLabel").text($(this).attr("targetPlateNo"));
	        $('#mymodal').modal({
	        	keyboard: true
	        });
	    });
	    
	    
 		$("#mymodal .save-btn").click(function () {
	    	
	    	var _this = $(this);
	    	_this.prop("disabled","disabled");
	    	
	    	var failReason = $("#orderSuccessSelect").val();
	    	
	        $.ajax({
	            type: "POST",
	            url: "saveOrdersSuccess",
	            data: {id : targetId, failReason : failReason, isSuccess : failReasonArray[failReason].success},
	            success: function (data) {
	                _this.prop("disabled", false);
	                $('#mymodal').modal('hide');
	                
	                if (data == 1) 
	                {
	                	$('#tablelist').bootstrapTable("updateRow",{index : targetIndex, row : {failReason : failReason, isSuccess : failReasonArray[failReason].success}});
	                } 
	                else 
	                {
	                    alert("操作失败");
	                }
	                
	            },
	            error: function () {
	                alert("操作失败");
	                _this.prop("disabled", false);
	            }
	        });
	    });

	});
	
	
	function showTextArea(t) {
        var failReason = $("#failReason")[0];
        if (t == true) {
            failReason.style.display = "none";
        } else if (t == false) {
            failReason.style.display = "block";
            failReason.value = "";
        }
    }

	   
    
</script>
</body>
</html>